<template>
  <el-select @change="handleProductChange" @clear="handleClear" clearable v-model="innerValue" placeholder="请选择产品"
             class="ele-fluid"
             style="width: 100%"
             filterable remote reserve-keyword :remote-method="searchProduct">
    <div @scroll="onScrollEvent" ref="scrollContainer" style="height: 250px; overflow-y: auto">
      <el-option v-for="item in productList" :key="item.ordersId" :label="item.cpName" :value="item.cpName">
      </el-option>
    </div>
  </el-select>
</template>

<script>
import {v4 as uuidv4} from 'uuid';
import {listOrders} from "@/api/production/orders";
// import {listProject} from "@/api/mould/project";
// import { listMaterialManagement } from "@/api/basicData/materialManagement";

export default {
  props: {
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      innerValue: this.value,
      productForm: {
        pageNum: 1,
        cpName: '',
        pageSize: 10,
        ordersId: ""
      },
      ordersId: '',
      //传过去的参数
      parameterList: [],
      productList: [],
      totalpage: 0,
      loading: false,
      materialNumber: ""
    };
  },
  watch: {
    value(newVal) {
      this.innerValue = newVal;
      this.productForm.cpName = newVal;
      this.productForm.pageNum = 1;
      this.productList = [];
      this.getProductlist();
    },
    innerValue(newVal) {
      this.$emit('input', newVal);
    }
  },
  created() {
    this.getProductlist(); // 初始加载数据
  },
  methods: {
    onScrollEvent() {
      const scrollContainer = this.$refs.scrollContainer;
      const scrollPosition = scrollContainer.scrollTop;
      const containerHeight = scrollContainer.clientHeight;
      const totalHeight = scrollContainer.scrollHeight;
      const threshold = 1; // 设置一个小的阈值
      if (totalHeight - (scrollPosition + containerHeight) <= threshold && !this.loading) {
        //console.log("下滑了");
        if (this.loading || this.productList.length >= this.totalpage) {
          return;
        }
        this.loading = true; // 状态改为加载中
        this.productForm.pageNum += 1; // 页面新增一页
        //console.log("增加的页数", this.productForm.pageNum);
        this.getProductlist();
      }
    },
    searchProduct(e) {
      //console.log("产品搜索", e);
      this.productForm.cpName = e;
      this.productForm.pageNum = 1;
      this.productList = [];
      this.getProductlist();
    },

//     listOrders(this.queryParams).then(response => {
//   this.ordersList = response.rows;
//   this.total = response.total;
//   this.loading = false;
// });
    getProductlist() {
      //console.log("产品参数", this.productForm);
      listOrders(this.productForm).then(res => {
        const newList = res.rows.map(item => {
          return {...item, uniqueId: uuidv4()};
        });

        this.productList = this.productList.concat(newList); // 合并新数据
        console.log(this.productList, '产品列表')
        this.totalpage = res.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    handleProductChange(e) {
      //console.log("搜索到的产品", e);
      const selectedProduct = this.productList.find(item => item.cpName === e);
      //console.log("每一项item", selectedProduct);
      this.parameterList.materialNumber = selectedProduct ? selectedProduct.materialNumber : '';
      this.parameterList.ordersId = selectedProduct ? selectedProduct.ordersId : '';
      this.parameterList.scSum = selectedProduct ? selectedProduct.scSum : '';
      // this.$emit('update:projectId', this.projectId);
      this.$emit('update:parameterList', this.parameterList); // 触发自定义事件，传递 materialNumber
    },
    handleClear() {
      this.materialNumber = '';
      this.$emit('update:materialNumber', this.materialNumber); // 触发自定义事件，清空 materialNumber
    }
  }
};
</script>
